{% extends "../main.html" %}

{% block header %}
<script src="/static/js/libs/animator.min.js"></script>
<script src="/static/js/pages/scoreboard/rankingTableUpdate.js"></script>
<script src="/static/js/pages/scoreboard/summary.js"></script>
<script src="/static/js/pages/missions/view.js"></script>
<link href="/static/css/pages/public/summary.css" rel="stylesheet" />
{% end %}

{% block title %}{{ _("Scoreboard") }}{% end %}

{% block content %}
    {% from tornado.options import options %}
    {% from math import ceil %}
    {% if not hide_scoreboard %}
    <div class="row-fluid">
        <div style="float:right; margin-top: -15px; margin-right: 4.75%;">
            {% set pcount = ceil(teamcount / display) %}
            <div id="parameters" data-count="{{display}}" data-page="{{page}}" style="visibility: hidden;"></div>
            <div class="pagination" style="padding: 5px; margin-right: 110px">
                <ul>
                    {% if pcount > 1 %}
                    <li {%if page==1 %}class="disabled" {%end%}><a {%if page !=1 %}href="?count={{display}}&page={{page-1}}"
                            {%end%}>Prev</a></li>
                    {% for x in range(max(1,page-4), min(pcount+1, max(page+5, 10))) %}
                    <li {%if page==x %}class="active" {%end%}><a {%if page !=x %}href="?count={{display}}&page={{x}}"
                            {%end%}>{{x}}</a></li>
                    {% end %}
                    <li {%if page==pcount %}class="disabled" {%end%}><a {%if page !=pcount
                            %}href="?count={{display}}&page={{page+1}}" {%end%}>Next</a></li>
                    {% end %}
                    <li class="disabled">
                        <a>&nbsp;{% if options.teams %}{{ _("Teams") }}{% else %}{{ _("Players") }}{% end %} {{ _("per page") }}</a>
                    </li>
                    <li>
                        <select id="page_count" style="width: 80px;">
                            {% if display!= 10 and display!=25 and display!=50 and display!=100 and display!=250 %}
                                <option value={{display}} selected>{{display}}</option>
                            {%end%}
                            <option value=10{% if display==10 %} selected{%end%}>10</option>
                            <option value=25{% if display==25 %} selected{%end%}>25</option>
                            <option value=50{% if display==50 %} selected{%end%}>50</option>
                            <option value=100{% if display==100 %} selected{%end%}>100</option>
                            <option value=250{% if display==250 %} selected{%end%}>250</option>
                        </select>
                    </li>
                </ul>
            </div>
        </div>
        {% if timer %}
        <h3 id="timercount" title="Scoreboard Countdown" style="float: right; color: red; margin-right: 100px;"></h3>
        {% end %}
        <h1 class="offset1">
            <i class="fa fa-bar-chart-o"></i>
            {{ _("Scoreboard") }}
        </h1>
    </div>
    <br />
    <div class="row-fluid">
        {% if len(options.scoreboard_right_image) > 0 %}
            {% set wellspan="span7" %}
        {% elif options.teams and options.show_mvp %}
            {% set wellspan="span7" %}
        {% else %}
            {% set wellspan="span10" %}
        {% end %}
        <div class="well {{wellspan}} offset1" style="padding-left: 30px; padding-right: 30px;">
            <div id="summary_loading"><h3>Loading...</h3></div>
            <table id="summary_table" class="table table-striped" data-since-score="{{ _('Since Score') }}">
                <thead>
                    <tr style="font-size: 120%;">
                        <th class="anim:position anim:update" style="text-align: center;"><i class="fa fa-trophy" style="font-size: 120%; margin-left: -10px; margin-top: -10px;"></i></th>
                        <th class="anim:id" style="display:none;"><!-- UUID --></th>
                        <th class="anim:constant">
                            {% if options.teams %}
                                {{ _("Team") }}
                            {% else %}
                                {{ _("Player") }}
                            {% end %}
                        </th>
                        <th class="anim:constant" style="text-align: center;{% if not options.use_bots %} display: none;{% end %}">{{ _("Bots") }}</th>
                        <th class="anim:constant" style="text-align: center;">{{ _("Flags") }}</th>
                        <th class="anim:constant" style="text-align: center;">
                            {% if options.banking %}
                                {{ _("Bank Account") }}
                            {% else %}
                                {{ _("Score") }}
                            {% end %}
                        </th>
                        <th class="anim:update"><!-- Details --></th>
                    </tr>
                </thead>
                <tbody id="summary_tbody" >
                    <!-- AJAX -->
                </tbody>
            </table>
        </div>
        {% set showimage = len(options.scoreboard_right_image) > 0 %}
        {% set showmvp = options.teams and options.show_mvp %}
        {% if showimage or showmvp %}
        <div class="well span3">
            {% if showimage %}
                <img id="scoreboard_right_image" src="{{options.scoreboard_right_image}}">
            {% end %}
            {% if showmvp %}
                <table id="scoreboard_mvp" class="table table-striped"{% if showimage %} style="display: none;"{% end %}>
                    <thead>
                        <tr>
                            <th>
                                {{ _("MVP") }}
                            </th>
                            <th style="text-align: center;">
                                {% if options.banking %}
                                    {{ _("Money") }}
                                {% else %}
                                    {{ _("Points") }}
                                {% end %}
                            </th>
                        </tr>
                    </thead>
                    <tbody id="mvp_table">
                        <!-- AJAX -->
                    </tbody>
                </table>
            {% end %}
        </div>
        {% end %}
    </div>
    {% else %}
    <h1 id="timercount_hidescoreboard" class="timercount"></h1>
    {% end %}
{% end %}